import React from 'react';
import { Table,Modal,message,Menu } from 'antd';
import axios from 'axios';
import './OrderDataList.css'

class OrderDataList extends React.Component {
    constructor(props){
        super(props);
        this.state={
            data:this.props.orderData,   //表格展示的数据
            visible: false,    //弹出框的显示状态
            modalData:{    //弹出框显示的数据
                goodsId: '',
                goodsName: "",
                orderId: '',
                orderState: "",
                userName: "",
                userTel:'',
                kuaiDiId:'',
            },
            editKuaiDi:false,  //是否修改了单号
            current:'allList',   //导航的选中项
        }
    }
    //表格展示搜索到的数据
    changeData=(newData)=>{
        this.setState({
            data:newData,
            current:'allList',
        })
    };
    //修改模态框的快递单号
    changeKuaiDiId=(e)=>{
        if (!this.state.editKuaiDi){    //如果修改了快递单号
            this.changeState('editKuaiDi',true)
        }
        //模态框展示的数据
        let newModalData = Object.assign(this.state.modalData,{kuaiDiId: e.target.value});
        //改变state中的数据
        this.changeState('modalData',newModalData)
    };
    //修改state
    changeState=(name,value)=>{
        this.setState({
            [name]:value
        });
    };
    //获取全部订单
    getNewListData=()=>{
        return axios({
            url:'http://123.57.67.148:3000/mock/195/getAllOrder',
            method:'post'
        }).then(res=>{
            if (res.data.code===200){
                message.success('列表获取成功');
                let data=res.data.orderData.filter(item=>{
                    item.key=item.orderId;
                    return item;
                });
                this.changeState('data',data);   //将新的列表数据传入state
            }else {
                this.changeState('data','');
                message.error('列表获取失败');
            }
        })
    };
    //获取待处理订单
    getWaitAnsListData=()=>{
        return axios({
            url:'http://123.57.67.148:3000/mock/195/getWaitAnsOrderList',
            method:'post'
        }).then(res=>{
            if (res.data.code===200){
                // message.success('待处理订单获取成功');
                let data=res.data.orderData.filter(item=>{
                    item.key=item.orderId;
                    return item;
                });
                this.changeState('data',data);   //将新的列表数据传入state
            }else {
                this.changeState('data','');
                message.error('待处理订单获取失败');
            }
        })
    };
    //点击弹出框 '确认' 按钮
    handleOk = e => {
        if (this.state.editKuaiDi){   //如果修改了快递单号
            axios({
                url:'http://123.57.67.148:3000/mock/195/editKuaiDiId',
                method: 'post',
                data:this.state.modalData
            }).then(res=>{
                if (res.data.code===200) {
                    message.success('修改成功') ;
                    this.getNewListData();   //刷新列表
                }else {
                    message.error('修改失败')
                }
            });
        }
        this.changeState('visible',false);   //将弹出框显示状态改为flase
        this.changeState('editKuaiDi',false);   //将修改状态改为flase
    };
    //点击弹出框 '取消' 按钮
    handleCancel = e => {
        this.changeState('visible',false);   //将弹出框显示状态改为flase
        this.changeState('editKuaiDi',false);   //将修改状态改为flase
    };
    //导航
    handleClick = e => {
        // console.log('click ', e);
        e.key==='allList' ? this.getNewListData() : this.getWaitAnsListData();
        this.setState({
            current: e.key,
        });
    };
    //点击表格行执行的方法
    clickRow=(record)=>{
        if (this.state.current==='allList') {
            this.setState({   //显示弹出框
                visible: true,
                modalData: record,
            });
            //如果是待处理订单
        }else if (this.state.current==='waitAns') {
            //此处做跳转
            this.props.history.push("/Home");
        }
    };
    render() {
        const columns = [
            {
                title: '订单ID',
                dataIndex: 'orderId',
                key: 'orderId',
                align:'center',
            },
            {
                title: '订单状态',
                dataIndex: 'orderState',
                key: 'orderState',
                align:'center',
            },
            {
                title: '商品名',
                dataIndex: 'goodsName',
                key: 'goodsName',
                align:'center',
            },
            {
                title: '商品ID',
                dataIndex: 'goodsId',
                key: 'goodsId',
                align:'center',
            },
            {
                title: '收货人姓名',
                dataIndex: 'userName',
                key: 'userName',
                align:'center',
            },
            {
                title: '收货人手机',
                dataIndex: 'userTel',
                key: 'userTel',
                align:'center',
            },
            {
                title: '快递单号',
                dataIndex: 'kuaiDiId',
                key: 'kuaiDiId',
                align:'center',
            },
        ];
        return (
            <div className='orderDataList'>
                <h2>订单列表</h2>
                {/*以下是导航栏*/}
                <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
                    <Menu.Item key="allList">全部</Menu.Item>
                    <Menu.Item key="waitAns">待处理</Menu.Item>
                </Menu>
                {/*以下是全部订单*/}
                <Table columns={columns} dataSource={this.state.data} size='middle' bordered pagination={{ position: ['bottomCenter'],pageSize:'5'}} onRow={(record)=>{
                    return{
                        //点击表格的行
                        onClick: (e)=>{this.clickRow(record);}
                    }
                }}/>
                {/*以下是弹出框*/}
                <Modal width='380px' title="订单详情" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} className='modalTable'>
                    <table>
                        <tbody>
                        <tr>
                            <td>订单ID:</td>
                            <td>{this.state.modalData.orderId}</td>
                        </tr>
                        <tr>
                            <td>订单状态:</td>
                            <td>{this.state.modalData.orderState}</td>
                        </tr>
                        <tr>
                            <td>商品名称:</td>
                            <td>{this.state.modalData.goodsName}</td>
                        </tr>
                        <tr>
                            <td>商品ID:</td>
                            <td>{this.state.modalData.goodsId}</td>
                        </tr>
                        <tr>
                            <td>收货人姓名:</td>
                            <td>{this.state.modalData.userName}</td>
                        </tr>
                        <tr>
                            <td>收货人手机:</td>
                            <td>{this.state.modalData.userTel}</td>
                        </tr>
                        <tr>
                            <td>快递单号:</td>
                            <td><input type="text" value={this.state.modalData.kuaiDiId} onChange={this.changeKuaiDiId}/></td>
                        </tr>
                        </tbody>
                    </table>
                </Modal>
            </div>
        );
    }
    //组件挂载后获取数据
    componentDidMount() {
        this.props.onRefChlid(this);   //将this传递给父组件
        this.getNewListData();
    }
}

export default OrderDataList;